<template>
   <el-container>
    <el-footer height="190px">
      <div class="footer-list">
        <div class="text-list left">
          <h3>关于我们</h3>
          <p>联系我们</p>
          <p>加入我们</p>
          <p>公司简介</p>
        </div>
        <div class="text-list">
          <h3>帮助中心</h3>
          <p>新手入门</p>
          <p>帮助指南</p>
        </div>
        <div class="text-list">
          <h3>手机客户端</h3>
          <span><img src="../../static/images/2code.png" alt=""></span>
        </div>
          <p class="copyright">侠客行版权所有 &copy; All rights reserved.</p>
      </div>
    </el-footer>
    </el-container>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style lang="less" scoped>
  .el-footer {
  background-color: #119c5b;
  color: #333;
  text-align: center;
  padding:0;
  .footer-list{
     color:#fff;
    margin: 34px auto auto;
    .text-list{
      font-size:12px;
      line-height: 24px;
      height:96px;
      width:196px;
      display: inline-table;
      border-left:1px solid #fff;
      h3{
        font-size:14px;
        font-weight: 700;
      }
    }
    .left{
      border-left:none;
    }
    .copyright{
      font-size:12px;
      line-height: 60px;
    }
  }
}
</style>
